<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<script>
	var $={
		ajax:function (options) {
			//底层是封装的XMLHttpRequest
			var xhr = new XMLHttpRequest();

			if(options.type.toLowerCase()==="get"){
				options.url += "?"+options.data;
				options.data = null;
			}
			xhr.open(options.type,options.url);
			//如果是post提交
			if(options.type.toLowerCase()==="post"){
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8")
			}

			if(options.beforeSend){
			   var flag = options.beforeSend();
			   if(!flag){
					return;
			   }
			}

			xhr.send(options.data);
			//接收数据
			xhr.onreadystatechange = function () {
				if(xhr.readyState===4){
					if(xhr.status ===200){
						/*if(options.success){
							options.success(xhr.responseText)
						}*/
						options.success && options.success(xhr.responseText);
					}else {
						options.error && options.error();
					}
					options.complete && options.complete();
				}
			}
		}
	}

	$.ajax({
		url:"ajax1.php",
		type:"get",
		data:"username=zhangsan",
	    //设置一个过滤器,请求发送之前调用
	    beforeSend:function(){
			console.log("请求发送之前调用");
			    //我们可以在这里去对发送到服务器的数据进行一些校验，正则校验
			    //如果验证不通过，就不发送请求了
			    //假设数据验证不通过
			    return true;
	    },
		success:function (info) {
			console.log(info,"数据响应成功之后调用");
		},
		//请求完成的时候调用. 我是想给用户一些提示.
		complete:function(){
			console.log("请求完成的时候去调用");
		},
		//请求出错的时候调用
		error:function(){
			console.log("请求出错的时候调用");
		}
	});
</script>
</body>
</html>